<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <style>
    	body {
			background-color:#F4F4F4;
		}
		.card{
			position:relative;
			height:274px;
			background:-webkit-linear-gradient(right, #F04040, #FF7A7A);
		}
		.top{
			padding-top:61px;
			width:100%;
			position:relative;
		}
		.right_arrow{
	 		height: 48px;
		    width: 96px;
		    background: url(__IMG__/left1.png) no-repeat center center;
		    background-size: 20px 33px;
		    position:absolute;
		    top:31px;
	 	}
		.title{
			font-size: 34px;
	      	color: #FFFFFF;
	      	text-align: center;
	      	width:100%;
		}
        .order{
           position:absolute;
           top:139px;
           width:100%;
           height:274px;
           border-radius: 0.55rem;
        }
        .orderrr{
        	width:92%;
        	min-height: 274px;
        	margin:0 auto;
        	border-radius: 22px;
        	background-color: #FFFFFF;
        	padding:43px 47px;
        }
	 	.order_status{
	 		font-size: 34px;
	      	color: #404040;
	      	text-align: center;
	      	font-weight:bold;
	 	}
	 	.tips{
	 		font-size: 26px;
	      	color: #555555;
	      	text-align: center;
	      	padding-top:10px;
	      	padding-bottom:26px;
	 	}
	 	.label1{
        	width:185px;
			height:65px;
			line-height:65px;
			text-align:center;
			border-radius:4px;
			background-color:#F0F0F0;
			font-size: 28px;
        	color: #999999;
        	margin-right:52px;
        }
        .label2{
        	padding-left:20px;
        	padding-right:20px;
			height:65px;
			line-height:65px;
			text-align:center;
			border-radius:4px;
			background:-webkit-linear-gradient(right, #F04040, #FF7A7A);
			font-size: 28px;
        	color: #FFFFFF;
        }
        .label4{
        	width:185px;
			height:65px;
			line-height:65px;
			text-align:center;
			border-radius:4px;
			background:-webkit-linear-gradient(right, #F04040, #FF7A7A);
			font-size: 28px;
        	color: #FFFFFF;
        	margin:0 auto;
        }
         .label3{
        	width:185px;
			height:65px;
			line-height:65px;
			text-align:center;
			border-radius:4px;
			border:2px solid #F04040;
			font-size: 28px;
        	color: #F04040;
        	margin:0 auto;
        }
		.order_list{
	    	width:92%;
        	margin:0 auto;
        	margin-top:194px;
        	border-radius: 22px;
        	background-color: #FFFFFF;
        	padding-left:20px;
        	padding-right:20px;
        	margin-bottom:30px;
	    }
	    .order_title{
        	color: #404040;
        	font-size: 30px;
            padding-right:18px;
            font-weight: bold;
            height:102px;
            line-height: 102px;
        }
        .arrow{
			width:12px;
			height:102px;
			background: url(__IMG__/right_arrow.png) no-repeat center center;
			background-size: 12px 22px;
			margin-left:20px;
        }
        .wait{
        	font-size: 26px;
        	color: #555555;
        }
        .phone{
        	width:21px;
			height:21px;
			margin-top: 42px;
			margin-right:11px;
        }
        .goods{
        	margin-top: 32px;
        	font-size: 26px;
        	color: #404040;
        }
        .goods_pic{
        	width:108px;
			height:108px;
			margin-right:30px;
        }
         .goods_pic img{
        	width:100%;
			height:100%;
        }
        .price{
        	padding-top:36px;
        }
        .total_num{
        	height:39px;
        	line-height:39px;
        	background-color: #F8F8F6;
        	text-align:center;
        	font-size: 26px;
        	color: #B7B7B7;
        	margin-top:43px;
        }
        .down{
        	width:21px;
			height:39px;
			background: url(__IMG__/down.png) no-repeat center center;
			background-size: 21px 13px;
			margin-left:11px;
        }
        .price_intro{
        	padding-top:6px;
        	padding-bottom:4px;
        }
        .single{
        	padding-bottom:20px;
        	font-size: 28px;
        	color: #555555;
        }
        .price{
        	font-size: 28px;
        	color: #555555;
        }
        .discount{
        	color:#F04040;
        }
        .price1{
        	font-size: 26px;
        	color: #B7B7B7;
        	padding-right:8px;
        }
        .price2{
        	font-size: 28px;
        	color: #404040;
        }
        .price3{
        	font-size: 42px;
        	color: #F04040;
        }
        .price4{
        	font-size:20px;
        	color: #F04040;
        }
        .price_all{
        	padding-top:43px;
        	padding-bottom:33px;
        }
        .all{
        	width:92%;
        	margin:0 auto;
        	border-radius: 22px;
        	background-color: #FFFFFF;
        	padding-left:20px;
        	padding-right:20px;
        	margin-bottom:30px;
        }
        .title1{
        	font-size:30px;
        	color: #404040;
        	height:102px;
        	line-height:102px;
        }
        .all{
        	padding-bottom:33px;
        }
        .end{
        	padding-top:20px;
        }
        .end_intro{
        	padding-bottom:20px;
        }
        .left_title{
        	font-size:26px;
        	color: #999999;
        }
        .right_text{
        	font-size:26px;
        	color: #555555;
        }

		.ovfHiden{overflow: hidden;height: 100%;}
    </style>
</head>
<body>

<div id="list"></div>
	<div class="card">
		<div class="top flex-wrap">
			<div class="right_arrow"  tapmode="active" onclick="gotolist({$type})"></div>
			<div class="title">订单详细</div>
		</div>
		<!--待支付-->
		{if $order.order_in_out =='1'}
			{if $order.order_status =='1'}
			<div class="order">
				<div class="orderrr">
					<div class="order_status">待支付</div>
					<div class="tips">请在订单提交后尽快支付，超时订单将会自动</div>
					<div class="flex-wrap">
						<div class="label1" tapmode onclick="delectMyOrder({$order.order_id});">取消订单</div>
						<div class="flex-con">
							<div class="label2 aui-ellipsis-1" tapmode onclick="againPay({$order.order_id});" payMoney='{$order.order_user_pay}'>去支付剩余(<span class="daojishi" otime="{$order.order_time}" orderid="{$order.order_id}" id='timeee_{$order.order_id}'></span>)</div>
						</div>

					</div>
				</div>
			</div>

			{elseif $order.order_status =='2' /}
			<div class="order">
				<div class="orderrr">
					<div class="order_status">商家已接单</div>
					<div class="tips">
						{if $order.order_driver_status=='1'}商品准备中{/if}
						{if $order.order_driver_status=='2'}配送中{/if}
						{if $order.order_driver_status=='3'}配送完成{/if}
					</div>
					<div class="flex-wrap">
						<div class="flex-con">
							<div class="label3" tapmode onclick="toMoney({$order.order_id});">确认收货</div>
						</div>
						<div class="flex-con">
							<div class="label3" tapmode onclick="backMoney({$order.order_id});">退货或退款</div>
						</div>
						{if $order.order_driver_status == 3 && $order.order_tousu==1}
						<div class="flex-con">
							<div class="label3" tapmode onclick="tousu({$order.order_id});">投诉</div>
						</div>
						{/if}
						{if $order.order_driver_status != 3}
						<div class="flex-con">
							<a class="label3" style="display: block;" href="tel:{$order.s_phone}">电话催单</a>
						</div>
						{/if}
					</div>
				</div>
			</div>

			{elseif $order.order_status =='3' /}

			<div class="order">
				<div class="orderrr">
					<div class="order_status">待评价</div>
					<div class="tips">感谢您使用红集，请评价订单</div>
					<div class="flex-wrap">
						<div class="flex-con">
							<div class="label3" oid="{$order.order_id}" s_thumb="{$order.s_thumb}" s_name="{$order.s_name}" onclick="gocomment(this);" >去评价</div>
						</div>
						{if $order.order_driver_status == 3 && $order.order_tousu==1}
						<div class="flex-con">
							<div class="label3" tapmode onclick="tousu({$order.order_id});">投诉</div>
						</div>
						{/if}
						<div class="flex-con">
							<div class="label4">再次购买</div>
						</div>

					</div>
				</div>
			</div>


			<!--已取消-->
			{elseif $order.order_status =='4' /}
			<div class="order">
				<div class="orderrr">
					<div class="order_status">订单已完成</div>
					<div class="tips">感谢您使用红集</div>
					{if $order.order_driver_status == 3 && $order.order_tousu==1}
					<div class="flex-con">
						<div class="label3" tapmode onclick="tousu({$order.order_id});">投诉</div>
					</div>
					{/if}
					<div class="flex-wrap">
							<div class="label4">再次购买</div>
					</div>
				</div>
			</div>

			{/if}
		{else /}
			<div class="order">
				<div class="orderrr">
					<div class="order_status">
						{if $order.order_in_out=='2'}退款审核中{/if}
						{if $order.order_in_out=='3'}退款成功{/if}
						{if $order.order_in_out=='4'}再次申请{/if}
					</div>
					<div class="tips">
						{if $order.order_in_out=='4'}退款请求被拒绝，如有问题请再次申请{else /}感谢您使用红集{/if}
					</div>
					<div class="flex-wrap">
						<div class="label4">再次购买</div>
					</div>
				</div>
			</div>
		{/if}

	</div>
	<div class="order_list">
		<div class="order_title flex-wrap underLine">
			<div>{$order.s_name ?? ''}</div>
			<div class="arrow"></div>
			<div class="flex-con"></div>
			<a class="phone" href="tel:{$order.s_phone}" tapmode><img src="__IMG__/call.png"/></a>
			<a class="wait" href="tel:{$order.s_phone}" tapmode>联系商家</a>
		</div>
		
		 {volist name='goods' id='g'}
		<div class="goods flex-wrap">
			<div class="goods_pic">
<img src="{$g.oi_good_thumb ?? '__IMG__/zhanweitu/a3.png'}">
			</div>
			<div class="flex-con">
				 <div>{$g.oi_good_name ?? ''}</div>
				<div class="flex-wrap price">
              	  {if $g.oi_price_kill > 0}
              	  <div class="flex-con">￥{$g.oi_price_kill}x{$g.oi_num}</div>
					<div>￥{$g.oi_price_kill*$g.oi_num}</div>
              	  {else /}
                  <div class="flex-con">￥{$g.oi_price_now}x{$g.oi_num}</div>
					<div>￥{$g.oi_price_now*$g.oi_num}</div>
                  {/if}
				</div>
			</div>
		</div>
		{/volist}

		<div class="total_num flex-wrap">
			<div class="flex-con"></div>
			共<?php echo count($goods); ?>件<!--<div class="down"></div>-->
			<div class="flex-con"></div>
		</div>

		<div class="price_intro">
			<div class="single flex-wrap">
				<div>商品金额</div>
				<div class="flex-con"></div>
				<div>￥{$order.order_money_all}</div>
			</div>
			<div class="single flex-wrap">
				<div>配送费</div>
				<div class="flex-con"></div>
				<div>￥{$order.order_money_send}</div>
			</div>
			<div class="single flex-wrap">
				<div>包装费</div>
				<div class="flex-con"></div>
				<div class="discount">￥{$order.order_money_pack}</div>
			</div>			
			<div class="single flex-wrap">
				<div>优惠</div>
				<div class="flex-con"></div>
				<div class="discount">-￥{$order.order_money_man}</div>
			</div>
			
		</div>
		<div class="price_all flex-wrap topLine">
			<div class="flex-con"></div>
			<div>
				<span class="price1">已优惠￥{$order.order_money_man}</span>
				<span class="price2">实付金额</span>
				<span class="price4">￥</span>
				<span class="price3">{$order.order_user_pay}</span>
			</div>

		</div>
	</div>

	<div class="all">
		<div class="title1 underLine">配送信息</div>
		<div class="flex-wrap end end_intro">
			<div class="left_title">送货时间：</div>
			<div class="flex-con right_text"></div>
		</div>
		<div class="flex-wrap end_intro">
			<div class="left_title">送货地址：</div>
			<div class="flex-con right_text">{$order.order_address}</div>
		</div>
		<div class="flex-wrap end_intro">
			<div class="left_title">配送方式：</div>
			<div class="flex-con right_text">商家配送</div>
		</div>
	</div>

	<div class="all">
		<div class="title1 underLine">订单信息</div>
		<div class="flex-wrap end end_intro">
			<div class="left_title">订单编号： </div>
			<div class="flex-con right_text">{$order.order_number}</div>
		</div>
		<div class="flex-wrap end_intro">
			<div class="left_title">下单时间：</div>
			<div class="flex-con right_text">{$order.order_time}</div>
		</div>
		<div class="flex-wrap end_intro">
			<div class="left_title">支付方式：</div>
			<div class="flex-con right_text">{if $order['order_type']==1} 支付宝 {else /} 微信支付 {/if}</div>
		</div>
		<div class="flex-wrap end_intro">
			<div class="left_title">订单备注：</div>
			<div class="flex-con right_text">{$order.order_remark}</div>
		</div>
	</div>

</body>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.5;top: 0;left: 0;background-color: black"></div>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
	function gotolist(type) {
        location.href = '{:url("Orders/index")}?type='+type;
    }
    timeTimer();
    //单纯分钟和秒倒计时
    var timer = setInterval(jishiMs,1000);
    function jishiMs() {
        if($('.daojishi').length <= 0){
            clearInterval(timer);
        }else{
            timeTimer();
        }
    }
    function timeTimer() {
        if($('.daojishi').length > 0) {
            $('.daojishi').each(function (data, index) {
                var orderTime = $(this).attr('otime');
                var nowTime = Date.parse(new Date());
                var oid = $(this).attr('orderid');
                var time1 = datetime_to_unix(orderTime);
                var cha = nowTime / 1000 - time1;
                if (cha < 1800) {
                    var M = 29 - Math.floor(cha / 60);
                    var S = 59 - Math.floor(cha % 60);
                    if (M < 10) {
                        M = '0' + M;
                    }
                    if (S < 10) {
                        S = '0' + S;
                    }
                    $(this).text(M + ':' + S);
                } else {
                    $.ajax({
                        url: '{:url("Orders/cancelOrder")}',
                        data: 'order_id=' + oid,//
                        type: 'POST',
                        dataType: 'JSON',
                        success: function (returndata) {
                            if (returndata.status == 200) {
                                var type = {$type};
                                location.href = '{:url("Orders/index")}?type='+type;
                            } else {
                                alert(returndata.msg);
                            }
                        },
                        error: function () {
                            alert('Ajax error!');
                        }
                    })
                }
            })
        }
    }
    function datetime_to_unix(datetime){
        var tmp_datetime = datetime.replace(/:/g,'-');
        tmp_datetime = tmp_datetime.replace(/ /g,'-');
        var arr = tmp_datetime.split("-");
        var now = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
        return parseInt(now.getTime()/1000);
    }
    function delectMyOrder(oid) {
        $.ajax({
            url: '{:url("Orders/cancelOrder")}',
            data: 'order_id=' + oid,//
            type: 'POST',
            dataType: 'JSON',
            success: function (returndata) {
                if (returndata.status == 200) {
                    var type = {$type};
                    location.href = '{:url("Orders/index")}?type='+type;
                } else {
                    alert(returndata.msg);
                }
            },
            error: function () {
                alert('Ajax error!');
            }
        })
    }
    //再次支付
    function againPay(oid) {
        $.ajax({
            url:'{:url("Orders/onlyPay")}',
            data: 'order_id='+oid+'&type=2',//
            type:'POST',
            dataType:'HTML',
            success: function(returndata){
                if(returndata == 1){
                    layer.open({
                        content: '订单生成失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else if(returndata == 2){
                    layer.open({
                        content: '支付数据更改失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else{
                    $('html,body').addClass('ovfHiden');
                    $('.all_div').css('display','block');
                    $('.all_div').html(returndata);
                }
            },
            error:function () {
                alert('Ajax error!');
            }
        })
    }
    //确认收货
    function toMoney(oid) {
        if(confirm('确认收货吗？')){
            $.ajax({
                url:'{:url("Orders/getMyOrder")}',
                data: 'order_id='+oid,//
                type:'POST',
                dataType:'json',
                success: function(returndata){
                    if(returndata.status == 200){
                        location.reload();
                    }else{
                        alert(returndata.msg)
                    }
                },
                error:function () {
                    alert('Ajax error!');
                }
            })
        }
    }
    //申请退款
    function backMoney(oid) {
        if(confirm('确认申请退款吗？')){
            $.ajax({
                url:'{:url("Orders/askfortuikuan")}',
                data: 'order_id='+oid,//
                type:'POST',
                dataType:'json',
                success: function(returndata){
                    if(returndata.status == 200){
                        location.reload();
                    }else{
                        alert(returndata.msg)
                    }
                },
                error:function () {
                    alert('Ajax error!');
                }
            })
        }
    }
    function gocomment(el) {
        event.stopPropagation();
        var oid = $(el).attr('oid');
        var thu = $(el).attr('s_thumb');
        var name = $(el).attr('s_name');
        var type = {$type};
        location.href = '{:url("Orders/goComment")}?order_id='+oid+'&type='+type+'&s_thumb='+thu+'&s_name='+name;
    }
    function tousu(oid) {
        event.stopPropagation();
        var type = {$type};
        location.href = '{:url("Orders/goTousu")}?order_id='+oid+'&type='+type;
    }
    $('.label4').click(function () {
        location.href = '{:url("home/Index/index")}';
    });
</script>
</html>
